<!--{
单元名称：服务协议列表
单元功能：查询服务协议列表，点击详情弹窗显示
所属模块功能：
创建人：yan
创建时间：230830
修改人：
修改时间：
}
-->
<template>
    <div class="container">
        <m-header>服务协议</m-header>
        <div class="main">
            <div class="list-wrap">
                <m-list :total="total" :cur-num="list.length" v-model="loading" @load="getDataList" :load-end="loadEnd">
                    <div class="item-wrap" v-for="(item,index) in list" :key="index">
                        <div class="item-box">
                            <div class="name">{{item.agreement_name}}</div>
                            <div>
                                <div class="btn" @click.stop="onShow(item)">详情</div>
                            </div>
                        </div>
                    </div>
                </m-list>
            </div>
        </div>

        <van-popup v-model="showPopup" closeable round :close-on-click-overlay="false" duration="0.2">
            <div class="popup-wrap">
                <div class="title">{{curDetail.agreement_name}}</div>
                <div class="content">
                    <textarea readonly>
                    {{curDetail.agreement_content}}</textarea>
                </div>
                <div class="btn-wrap">
                    <!--<van-button class="btn" color="#24C373" @click="onAgree" v-prevent-re-click>已阅读并同意</van-button>-->

                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
  import list from '@/components/list/list';
  import {Popup } from 'vant';
  import {getPassenger, getAgreement} from "../../request/api";
  import dialog from '@/utils/dialog'

  export default {
    name: "passengerList",
    components: {
      "m-list": list,
      [Popup.name]: Popup
    },
    props: ['isComponent'],
    data() {
      return {
        list: [],
        total: 0,
        limit: 10,
        page:1,
        loading: false,
        loadEnd: true,

        showPopup: false,
        curDetail: {},
        isAdd: null
      }
    },
    methods: {
      getDataList(first){
        let {page,limit,loadEnd} = this,  //当前请求页数
          list = [];
        getAgreement().then(res => {
          if (res.errcode !== 0) return;
          let data = res.row;

          this.list = data;
          this.loadEnd = !loadEnd;
          this.total = data.length;
          this.limit = data.length;
        })
        /*setTimeout(()=>{
          if (!first){list = this.list}
          let data = [
            {passenger_name: '小李',grade_class: '三年级二班',home_way: '家长接送',sex: '女',card_type: '居民身份证',id_card: '440006655455677881',school: '第一小学',photo: 'https://img01.yzcdn.cn/vant/leaf.jpg',guardian_name: '老李',guardian_phone: '13612345678'},
            {passenger_name: '小何',grade_class: '三年级一班',home_way: '家长接送',sex: '男',card_type: '居民身份证',id_card: '440006655455677881',school: '第一小学',photo: 'https://img01.yzcdn.cn/vant/leaf.jpg',guardian_name: '老何',guardian_phone: '13612345678'},
            {passenger_name: '小王',grade_class: '二年级三班',home_way: '自行回家',sex: '男',card_type: '居民身份证',id_card: '440006655455677881',school: '第一小学',photo: 'https://img01.yzcdn.cn/vant/leaf.jpg',guardian_name: '老王',guardian_phone: '13612345678'},
            {passenger_name: '小秦',grade_class: '一年级二班',home_way: '自行回家',sex: '男',card_type: '居民身份证',id_card: '440006655455677881',school: '第一小学',photo: 'https://img01.yzcdn.cn/vant/leaf.jpg',guardian_name: '老秦',guardian_phone: '13612345678'},
            {passenger_name: '小吴',grade_class: '一年级二班',home_way: '家长接送',sex: '男',card_type: '居民身份证',id_card: '440006655455677881',school: '第一小学',photo: 'https://img01.yzcdn.cn/vant/leaf.jpg',guardian_name: '老吴',guardian_phone: '13612345678'},
          ],total = 10;  //请求接口返回的数据列表和总数
limit
          list = [...list,...data];

          this.list = list;
          this.loadEnd = !loadEnd;
          this.page = ++page;
          this.total = total
        },1000)*/
      },

    //  显示详情
      onShow(item){
        this.curDetail = item;
        this.showPopup = true
      }
    }
  }
</script>

<style scoped lang="less">
    .list-wrap{
        height: 100%;
        padding-top: 10px;
        box-sizing: border-box;
        .item-wrap{
            padding: 0 10px;
            & + .item-wrap{
                margin-top: 10px;
            }
            .item-box{
                background: #fff;
                border-radius: 2px;
                display: flex;
                justify-content: space-between;
                height: 50px;

                & > div{
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
                .name{
                    padding-left: 15px;
                    font-size: 16px;
                    color: #2E2E2E;
                }
                .btn,.btn2{
                    padding-right: 15px;
                    font-size: 14px;
                    color: #24C373;
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
                .btn2{
                    color: #ff4d4a;
                }
            }
        }
    }

    .footer{
        padding: 10px;
        .btn{
            width: 100%;
        }
    }

    .popup-wrap{
        width: 355px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 571px;
        .title{
            padding: 15px 15px 10px;
            color: #333333;
            font-size: 17px;
            font-weight: bold;
        }
        .content{
            flex: 1;
            height: 0;
            padding: 0 15px;
            width: 100%;
            box-sizing: border-box;
            textarea{
                height: 100%;
                width: 100%;
                color: #333333;
                font-size: 15px;
                line-height: 24px;
                outline: none;
                border: none;
                resize:none;
            }
        }
        .btn-wrap{
            width: 100%;
            padding: 5px 15px 15px;
            box-sizing: border-box;
            .btn{
                width: 100%;
            }
        }

    }
</style>
